<template>
  <el-dialog :title="titleName+'-预约的学生'" :visible.sync="dialogVisible" @close="$emit('update:visible',false)"
             width="70%">
    <div class="table-body-box">
      <div class="breadcrumb-container">
        <div class="search_box">
          <el-date-picker
              style="width: 140px"
              v-model="searWord.start_time"
              type="date"
              placeholder="选择查询日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              size="small">
          </el-date-picker>
          <el-select v-model="searWord.type" placeholder="请选择区间" style="width: 130px" size="small">
            <el-option
                v-for="item in areaList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </div>
        <el-button type="primary" @click="InitFn" size="small"><i class="el-icon-search"></i>搜索</el-button>
        <el-button size="small" @click="updateTime"><i class="el-icon-refresh"></i>重置</el-button>
<!--        <download :type="ranking" :option="{start_time: searWord.start_time,corner_id:searWord.corner_id,type: searWord.type}"></download>-->
        <downexcel type="cornerStudent" :option="{start_time: searWord.start_time,corner_id:searWord.corner_id,type: searWord.type}" v-if="arryList.length"></downexcel>
        <span class="allbook">总 {{ arryList.length }} 条数据</span>
      </div>
      <el-table :data="arryList"
                height="400"
                :stripe="tableStyle.tableStripe"
                :border="tableStyle.tableBorder"
                tooltip-effect="dark"
                ref="table">
        <el-table-column
            prop="student_id"
            label="ID"
            width="90"
            align="center">
        </el-table-column>
        <el-table-column
            label="头像"
            width="100"
            align="center">
          <template slot-scope="scope">
            <ImagePreview :src="scope.row.student.pic" width="40px" height="40px"></ImagePreview>
          </template>
        </el-table-column>
        <el-table-column label="预约学生" prop="name" align="center">
          <template slot-scope="scope">
            {{ scope.row.student ? scope.row.student.name : '' }}
          </template>
        </el-table-column>
        <el-table-column label="学生班级" prop="name" align="center">
          <template slot-scope="scope">
            {{ scope.row.classes ? scope.row.classes.class_name : '' }}
          </template>
        </el-table-column>
<!--        <el-table-column label="预约时间" prop="create_time" align="center"></el-table-column>-->
        <el-table-column label="累计时长" prop="all_time" align="center"></el-table-column>
      </el-table>
      <!--      <el-pagination-->
      <!--          :page-size="page.pagesize"-->
      <!--          layout="prev, pager, next"-->
      <!--          :total="page.total"-->
      <!--          :current-page="page.pageindex"-->
      <!--          @current-change="handleSizeChange">-->
      <!--      </el-pagination>-->
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="small">返 回</el-button>
      <!--      <el-button type="primary" @click="submitCheckFn">确 定</el-button>-->
    </div>
  </el-dialog>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
// import download from '@/components/common/download'

export default {
  name: 'studentMultiple',
  props: ['visible', 'userOption'],
  components: {
    // download
  },
  data() {
    return {
      dialogVisible: this.visible,
      areaList: [
        {
          id: 1,
          name: '上午'
        },
        {
          id: 2,
          name: '下午'
        }
      ],
      searWord: {
        start_time: '',
        corner_id: 0,
        type: 1, // 1 上午 2 下午
      },
      arryList: [],
      titleName: '',
      ranking: 'cornerStudent',
      tableStyle: tableoption,
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      console.log('this.userOption:', this.userOption)
      if (this.visible) {
        this.titleName = this.userOption.name
        this.searWord.corner_id = this.userOption.id
        this.updateTime()
      } else {
        this.searWord = {
          start_time: '',
          corner_id: 0,
          type: 1, // 1 上午 2 下午
        }
      }
    }
  },
  created() {
  },
  methods: {
    updateTime() {
      let cd = new Date()
      this.Weekdate = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2)
      this.searWord.type = 1
      this.searWord.start_time = this.Weekdate;
      this.InitFn()
    },
    zeroPadding(num, digit) {
      let zero = ''
      for (let i = 0; i < digit; i++) {
        zero += '0'
      }
      return (zero + num).slice(-digit)
    },
    // 初始化
    InitFn() {
      this.$fetch(this.api.admin_class_apply_user, this.searWord).then((response) => {
        if (response.code === 0) {
          this.arryList = response.list
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
  },
  mounted() {
  }
}
</script>
<style>
.search_box {
  display: flex;
  align-items: center;
}
</style>
